import React from 'react';

import { RatingTag, Title } from '@/shared/ui';
import { Checkbox } from '@/shared/ui/Checkbox';
import { Options } from '@/shared/ui/Options';
import classNames from 'classnames';

import cs from './TarfixBox.module.scss';

type Props = {
  active: 'year' | 'month';
  setActive: React.Dispatch<React.SetStateAction<'year' | 'month'>>;
};

export const TarfixBox = ({ active, setActive }: Props) => (
  <Options amount={2} padding="big">
    <span className={classNames(cs.option)} onClick={() => setActive('year')}>
      <span className={cs.price}>
        <Checkbox isActive={active === 'year'} /> <Title size="xs">На год</Title>{' '}
        <RatingTag value={67} variant="sale"></RatingTag>
      </span>
      <div className={cs.price}>
        <Title className={cs.prev_price} size="m">
          1 188 ₽
        </Title>
        <Title size="m">399 ₽</Title>
      </div>
    </span>
    <span className={classNames(cs.option)} onClick={() => setActive('month')}>
      <span className={cs.price}>
        <Checkbox isActive={active === 'month'} /> <Title size="xs">На месяц</Title>{' '}
      </span>
      <Title size="m">99 ₽</Title>
    </span>
  </Options>
);
